<template>
  <div class="div_box">
    <div style="min-width: 1600px;">
      <el-form :inline="true" :model="searchScriptForm" @keyup.enter.native="getScriptList()">
        <el-form-item>
          <el-input v-model="searchScriptForm.name" placeholder="脚本名称 TODO" title="模糊匹配" clearable />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchScriptForm.id" placeholder="脚本ID TODO" title="精确查找" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getScriptListByCondition()">查询</el-button>
          <el-button type="primary" @click="DEBUG()">DEBUG</el-button>
          <el-button type="primary" @click="uploadScriptHandle()">上传脚本</el-button>
          <el-button type="danger" :disabled="scriptListSelections.length <= 0" @click="deleteHandle()">批量删除</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="scriptListLoading"
        :data="scriptList"
        style="width: 100%;"
        border
        @selection-change="selectionChangeHandle"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50" />
        <el-table-column prop="id" header-align="center" align="center" width="50" label="ID" />
        <el-table-column prop="name" header-align="center" align="center" label="脚本名称" />
        <el-table-column header-align="center" align="center" label="依赖资源">
          <template slot-scope="scope">
            <el-select v-model="scope.row.resourceIds" multiple filterable allow-create default-first-option placeholder="请选择资源标签" @visible-change="scriptChangeSwitch($event, scope.row)" @change="scriptChange(scope.row)">
              <el-option v-for="item in selectResourceListOption" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="creator" header-align="center" align="center" label="创建人" width="100" />
        <el-table-column prop="createTime" header-align="center" align="center" label="创建时间" width="200" sortable />
        <el-table-column label="压测平台" header-align="center" width="150">
          <template slot-scope="scope">
            <svg-icon v-if="scope.row.platform == 'JMETER'" icon-class="jmeter-logo" class="platformIcon" />
            <svg-icon v-if="scope.row.platform == 'GATLING'" icon-class="gatling-logo" class="platformIcon" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="200" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="viewScriptHandle(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="editScriptHandle(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteScript(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
      <!-- 上传脚本 -->
      <upload-script v-if="uploadScriptVisible" ref="uploadScript" @refreshDataList="getScriptList()" />
      <!-- 查看脚本 -->
      <view-script v-if="viewScriptVisible" ref="viewScript" @refreshDataList="getScriptList()" />
      <!-- 编辑脚本 -->
      <edit-script v-if="editScriptVisible" ref="editScript" @refreshDataList="getScriptList()" />
    </div>
  </div>
</template>

<script>
import { searchAll, deleteScript, updateResource } from '@/api/perf/script.js'
import { getAllNames } from '@/api/perf/resource.js'
import UploadScript from './script-upload'
import ViewScript from './script-view'
import EditScript from './script-edit'
export default {
  name: 'PerfScript',
  components: {
    UploadScript,
    ViewScript,
    EditScript
  },
  data() {
    return {
      // Script Table数据
      scriptList: [],
      // 查询Form数据
      searchScriptForm: {
        name: '',
        id: ''
      },
      // Table的v-loading
      scriptListLoading: false,
      // Table中的多选，通过selectionChangeHandle方法添加或删除
      scriptListSelections: [],
      // 分页查询初始化数据
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      // 控制外部vue模块的显示
      uploadScriptVisible: false,
      viewScriptVisible: false,
      editScriptVisible: false,
      selectResourceListOption: []
    }
  },
  created() {
    // 初始化查询
    this.getScriptList()
    this.getAllNames()
  },
  activated() {
    // 初始化查询
    this.getScriptList()
    this.getAllNames()
  },
  methods: {
    DEBUG() {
      console.info(this.scriptList)
    },
    // 删除脚本
    deleteScript(row) {
      deleteScript(row.id).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.$message.success(respnose.message)
        } else {
          this.$message.error(respnose.message)
        }
        this.getScriptList()
      })
    },
    // 查询script列表
    getScriptList() {
      this.scriptListLoading = true
      searchAll(this.pageIndex, this.pageSize).then(respnose => {
        if (respnose && respnose.code === 200) {
          const { data } = respnose
          this.scriptList = data.content
          this.totalPage = data.totalElements
        } else {
          this.$message.error(respnose.message)
          this.scriptList = []
          this.totalPage = 0
        }
        this.scriptListLoading = false
      })
    },
    getAllNames() {
      getAllNames().then(respnose => {
        if (respnose && respnose.code === 200) {
          this.selectResourceListOption = respnose.data
        } else {
          this.$message.error(respnose.message)
        }
      })
    },
    // 控制要不要更新关联数据
    scriptChangeSwitch(event, row) {
      row.isActivity = event
    },
    // 更新关联数据操作
    scriptChange(row) {
      if (row.isActivity) {
        updateResource(row.id, row.resourceIds.join(',')).then(respnose => {
          if (respnose && respnose.code === 200) {
            this.$message.success(respnose.data)
          } else {
            this.$message.error(respnose.message)
          }
        })
      }
    },
    getScriptListByCondition() {
      this.getScriptList()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getScriptList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getScriptList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.scriptListSelections = val
    },
    // 删除
    deleteHandle(id) {
      var ids = id ? [id] : this.scriptListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/renren-fast/perf/script/deleteBatch'), // todo
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({
          respnose
        }) => {
          if (respnose && respnose.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getScriptList()
              }
            })
          } else {
            this.$message.error(respnose.message)
          }
        })
      }).catch(() => {})
    },
    // 查看脚本
    viewScriptHandle(row) {
      this.viewScriptVisible = true
      this.$nextTick(() => {
        this.$refs.viewScript.init(row.id)
      })
    },
    // 编辑脚本
    editScriptHandle(row) {
      this.editScriptVisible = true
      this.$nextTick(() => {
        this.$refs.editScript.init(row.id)
      })
    },
    // 上传脚本
    uploadScriptHandle() {
      this.uploadScriptVisible = true
      this.$nextTick(() => {
        this.$refs.uploadScript.init()
      })
    }
  }
}
</script>

<style scoped="scoped">
.div_box {
  border: 1px solid #eee;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
}
.platformIcon {
  width: 8em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
